<template>
 <div class="film-list-content">
   <div class="loading" v-if="show">
         <van-loading size="24px">加载中...</van-loading>
    </div>
    <div class="nowPlayingList-wrap">
      <ul class="nowPlayingList" v-if="ScreenList">
        <li class="nowPlayingFilm-item" v-for="(i,index) in ScreenList" :key="index">
          <a href="" class="nowPlayingFilm-wrap">
            <div class="lazy-img-wrap" style="width: 66px; height: 94px; background: rgb(249, 249, 249)">
              <img class="target-img" :src="i.poster" alt=""/>
            </div>
            <div class="nowPlayingFilm-info">
              <div class="nowPlayingFilm-name info-col">
                <span class="name">{{i.name}}</span>
                <span class="item">{{i.item.name}}</span>
              </div>
              <div class="nowPlayingFilm-actors info-col">
                <span class="label" v-for="(t,index) in i.actors" :key="index">主演：{{t.name}}</span>
              </div>
              <div class="nowPlayingFilm-detail info-col">
                <span class="label">上映日期：{{getTodo(i.premiereAt)}}</span>
              </div>
            </div>
            <div class="nowPlayingFilm-buy" style="right">购票</div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import { reactive, toRefs , onMounted, computed} from 'vue'
import { CurrentlyMovie } from '@/api/index.js'
import { useStore } from 'vuex';
export default {
  name:'Coming',
  setup(props){
    const state = reactive({
        ScreenList:null,
        show:true,
        pageNum:1
    });

 const Upcoming = async ()=>{
    const { data:res } = await CurrentlyMovie( state.pageNum , { id:store.state.city.cityId , pageSize:10, type:2, k:8483823})
    if (res.msg == 'ok') {
       state.ScreenList=res.data.films
       state.show=false
    }
  }
    onMounted(()=>Upcoming());

    //电影上映日期
    const getTodo = computed(()=>{
        return function(premiereAt){
        var date = new Date(premiereAt * 1000) 
        let y = date.getFullYear()//年
        let MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let m = date.getMinutes()
        m = m < 10 ? ('0' + m) : m
        let weekDay = ['周天','周一','周二','周三','周四','周五','周六'] 
        let day =date.getDay()
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return weekDay[day] + ' ' + MM + '月' + d + '日'
       }
    })

    const store = useStore()

    return {
      ...toRefs(state),
      getTodo
    }
  }
}
</script>

<style lang='less' scoped>
.nowPlayingList-wrap {
  // background-color: rgb(244, 244, 244);
   padding-bottom: 15px;

  .nowPlayingList {
    background: white;
    overflow: hidden;
   
  }
  .nowPlayingFilm-item {
    padding: 15px 15px 15px 0;
    position: relative;
     margin-left: 15px;

    .nowPlayingFilm-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .target-img {
    height: 100%;
  }
  .nowPlayingFilm-info {
    width: calc(100% - 116px);
    padding: 0 10px;
  }
  .info-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    .name {
      max-width: calc(100% - 25px);
      color: #191a1b;
      font-size: 16px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item {
      font-size: 9px;
      color: #fff;
      background-color: #d2d6dc;
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
    }
  }
  .nowPlayingFilm-name span {
    display: inline-block;
    vertical-align: middle;
  }
  .label {
    font-size: 13px;
    margin-top: 4px;
    color: #797d82;
  }
  .grade {
    color: #ffb232;
    font-size: 14px;
  }
  .nowPlayingFilm-buy {
    line-height: 25px;
    height: 25px;
    width: 50px;
    color: #ffb232;
    font-size: 13px;
    text-align: center;
    border-radius: 2px;
    position: relative;
  }
  .nowPlayingFilm-buy:after {
    content: " ";
    transform: scale(0.5);
    position: absolute;
    border: 1px solid #ffb232;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border-radius: 4px;
  }
  .nowPlayingFilm-item:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
}
// 清除浮动
.clear:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.loading{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>